'use client'
import { CDN } from "@/utils/env";
import { useRouter } from "next/navigation";
import { Dispatch, useEffect, useState } from "react";

export default function Mobile() {
    const [open, setOpen] = useState<boolean>(false)
    const [isTop, setIsTop] = useState<boolean>(true);

    useEffect(() => {
        const handleScroll = () => {
            setIsTop(window.scrollY < 50);
        }

        window.addEventListener('scroll', handleScroll)
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])

    return <header className="lg:hidden">
        <div className="h-[64px]"></div>
        <div className={`fixed h-[64px] left-0 top-0 w-full flex items-center justify-between px-[20px] z-10 transition-colors duration-200 ${
        isTop ? 'bg-transparent' : 'bg-[#0B1611] shadow-lg'
      }`}>
            <img className="size-[32px]" src={`${CDN}images/logo.svg`} />
            <div className="flex-1 mx-[5px] text-white text-[15px] font-[700]">Diamond Galaxy</div>
            <img className="size-[30px]" src={`${CDN}images/menu.svg`} onClick={() => setOpen(true)} />
        </div>
        {/* fixed 菜单 */}
        {open && <Menu onClose={() => setOpen(false)} />}
    </header>
}

const Menu = ({ onClose }: { onClose: Dispatch<void> }) => {
    const router = useRouter()
    return <div className="fixed left-0 top-0 w-full h-full bg-black/50 z-10" onClick={() => onClose()}>
        <div className="bg-white w-2/3 h-full" onClick={e => e.stopPropagation()}>
            <div className="text-[18px] font-[700] px-[8px] py-[10px] active:bg-gray-100" onClick={() => {
                onClose()
                router.push('/home')
            }}>Home</div>
            <div className="text-[18px] font-[700] px-[8px] py-[10px] active:bg-gray-100" onClick={() => {
                onClose()
                router.push('/protocol')
            }}>Privacy Policy</div>
            <div className="text-[18px] font-[700] px-[8px] py-[10px] active:bg-gray-100" onClick={() => {
                onClose()
                router.push('/contact')
            }}>Contact us</div>
        </div>
    </div>
}